<template>
	<view class="IndustryChoicePage">
		<view class="header">
			<!-- #ifdef APP-PLUS -->
			<u-navbar title="兴趣分类选择" bgColor="transparent" titleStyle="color:#FFFFFF;font-weight:bold;"
				leftIconSize="36" leftIconColor="#FFFFFF" placeholder safeAreaInsetTop @leftClick="back">
				<u-button class="navbar-right-btn flex_center" slot="right" type="default" @click="onSure()">确定
				</u-button>
			</u-navbar>
			<!-- #endif -->

		</view>
		<view class="search">
			<view class="search-box">
				<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/occupation/search.png" mode=""></image>
				<view class="line"></view>
				<u--input v-model="searchText" type="text" class="input" clearable placeholder="搜索岗位名称"
					@input="inputSearch" />
			</view>
		</view>
		<!-- 主体内容 -->
		<view class="conent-boxs">
			<view class="left">
				<view :class="item.id === activeObj.id ? 'nav-item active' : 'nav-item'"
					v-for="(item, index) in treeList" :key="index" @click="navClick(item)">
					<image class="line" src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/occupation/nav-line.png"
						mode=""></image>
					<text>{{ item.name }}</text>
				</view>
			</view>
			<view class="right" v-if="loading">
				<u-loadmore status="loading" />
			</view>
			<view class="right" v-if="!loading">
				<view class="industry-level2-item">
					<view class="industry-level3-box">
						<view
							:class="selectInfo && selectInfo.id === item.id ? 'industry-level3-item selected' : 'industry-level3-item'"
							v-for="(item, idn) in activeObj.child || []" :key="idn" @click="selectInfo = item">
							{{ item.name }}
						</view>
					</view>
				</view>
			</view>
			<!-- 搜索结果展示组件 -->
			<view class="search-result" v-show="searchText">
				<view class="result-item" v-for="(item, index) in searchList" :key="index" @click="selectInfo = item">
					<view class="name" v-html="searchResultName(item.name)">{{ item.name }}</view>
					<view class="desp" v-html="searchResultName(item.metaPath)">{{ item.metaPath }}</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="footer">
			<text class="title">已选:</text>
			<view class="selected-list-boxs" v-if="selectInfo">
				<view class="selected-item">
					<text>{{ selectInfo.name }}</text>
					<image @click="cancelSelect(selectInfo)"
						src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/occupation/industry-delete.png" mode="">
					</image>
				</view>
			</view>
			<!-- #ifdef H5 || MP-WEIXIN -->
			<view class="flex_end footer_button">
				<u-button class="navbar-right-btn" slot="right" type="default" @click="onSure()">确定</u-button>
			</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	import {
		industryTreeAll,
		industrySearch
	} from '../../../apis/apis.js';
	export default {
		data() {
			return {
				loading: true,
				// 兴趣1、2、3
				interestType: null,
				treeList: [],
				// 当前激活菜单
				activeObj: null,
				// 选中数据信息-单选
				selectInfo: null,
				// 搜索词及搜索结果
				searchText: '',
				barTop: 0,
				barHeight: 0,
				searchTop: 0,
				barBottom:0,
				searchList: [{
					id: 1,
					name: '产品经理助理',
					metaPath: '产品-中后台-产品经理-产品助理'
				}],
				// 本地备用列表
				TreeListAll: []
			};
		},
		onLoad(option) {
			function pxToRpx(px) {
			     const screenWidth = wx.getSystemInfoSync().screenWidth
			     return px * 750 / screenWidth
			   }
			// #ifdef MP-WEIXIN
			let res = uni.getMenuButtonBoundingClientRect()
			this.barHeight = res.height
			this.barTop = res.top
			this.barBottom = res.bottom
			this.searchTop = pxToRpx((this.barTop + this.barBottom) / 2 ) - 25;
			this.c = res.bottom * 2 + 4 + 'rpx'
			// #endif
			console.log(option);
			this.interestType = option.interset * 1 || 0;
			if (option.selected && option.selected != 'null') {
				this.selectInfo = JSON.parse(option.selected);
			}
			this.getList();
		},
		methods: {
			// 获取兴趣标签树状数据
			getList() {
				industryTreeAll({
					type: 2
				}).then(res => {
					if (res.code === 200) {
						this.treeList = res.data || [];
						this.activeObj = this.treeList[0];
						this.TreeListAll = this.jsArrsyFlat(JSON.parse(JSON.stringify(this.treeList)));
					} else {
						uni.$u.toast(res.msg);
					}
					this.loading = false;
				});
			},
			//返回
			back() {
				uni.navigateBack();
			},
			// 点击了左侧导航item
			navClick(item) {
				this.activeObj = item;
			},
			// 删除选中行业标签
			cancelSelect(item) {
				this.selectInfo = null;
			},
			// 确定，返回上一个页面
			onSure() {
				console.log(this.selectInfo);
				const data = {
					type: this.interestType,
					info: this.selectInfo
				};
				uni.$emit('interest-selected', data);
				uni.navigateBack({
					delta: 1
				});
			},
			// 搜索框输入值变化
			inputSearch(val) {
				if (!val) return;
				// industryTreeAll({searchValue: val, type: 2}).then(res=>{
				// 	console.log('result:',res)
				// 	// this.searchList = res.data || []
				// })
				// 没有兴趣搜索的接口，树形接口测试了无法搜索，本地浅浅实现一下简单过滤；默认node版本不支持分词，没引入分词库
				this.searchList = this.TreeListAll.filter(v => v.name.includes(val) || val.includes(v.name) || v.parentObj
					.name.includes(val) || val.includes(v.parentObj.name));
				// console.log('all:', this.TreeListAll)
			},
			// 数组对象扁平化
			jsArrsyFlat(tree, field = 'child') {
				let tempList = [];
				tree.forEach(item => {
					item[field] = item[field].map(v => ({
						...v,
						parentObj: JSON.parse(JSON.stringify(item)),
						metaPath: this.findTreeObjPath(this.treeList, v.id)
							.map(m => m.name)
							.join('-')
					}));
					item[field] && item[field].length > 0 && (tempList = [...tempList, ...item[field]]);
				});
				return tempList;
			},
			// 正则表达式替换搜索结果中的关键词 突出显示
			searchResultName(name) {
				// 使用模板字符串 解析带有变量的正则表达式
				let reg = `/${this.searchText}/g`;
				// 使用变量 存储 字符串替换结果
				// 不修改 原始内容变量name 中存储的字符串的原始内容
				let result = ''
				// #ifdef APP-PLUS
				result = name.replace(eval(reg), `<text style="color: #194FC9;">${this.searchText}</text>`);
				// #endif
				// #ifdef H5 || MP-WEIXIN
				result = name.replace(reg, `<text style="color: #194FC9;">${this.searchText}</text>`);
				// #endif
				let flagStr = name
					.split('-')
					.map(n => (this.searchText.includes(n) && `<text flags style="color: #194FC9;">${n}</text>`) || n)
					.join('-');
				this.searchText.includes(name) && (result = `<text style="color: #194FC9;">${name}</text>`);
				flagStr.includes('flags') && (result = flagStr);
				return result;
			},
			/** 根据id查找树形数组里的对象在这个树形数据中的路径 (data为目标树，id为目标节点id)   retuen array  */
			findTreeObjPath(data, id) {
				let nodePathArray = [];
				// 定义一个可递归方法去一层一层遍历子节点
				let recursion = (tree, targetId) => {
					for (let index = 0; index < tree.length; index++) {
						if (tree[index].child) {
							let endRecursiveLoop = recursion(tree[index].child, targetId);
							if (endRecursiveLoop) {
								// 数组起始位置插入数据
								nodePathArray.unshift(tree[index]);
								return true;
							}
						}
						if (tree[index].id === targetId) {
							nodePathArray.unshift(tree[index]);
							return true;
						}
					}
				};
				recursion(data, id);
				return nodePathArray;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.header {
		height: 362rpx;
		background: linear-gradient(250deg, #1f73f4, #1e8ffb, #15afff);
		color: #ffffff;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #ffffff;
		line-height: 44rpx;

		.content {
			padding: 40rpx;
		}

		h2 {
			font-size: 52rpx;
			font-weight: bold;
			text-shadow: 0px 8px 6px rgba(101, 169, 247, 0.18);
			margin-bottom: 30rpx;
		}

		image {
			width: 355rpx;
			height: 182rpx;
			float: right;
			transform: translateY(-100rpx) translateX(40rpx);
		}
	}

	.navbar-right-btn {
		height: 60rpx;
		background: #ffffff;
		box-shadow: 0px 7rpx 20rpx 0px rgba(152, 152, 152, 0.16);
		border-radius: 30rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #1e88fa;
		line-height: 53rpx;
	}

	.header_r {
		padding: 10rpx 20rpx;
	}

	.search {
		height: 160rpx;
		padding: 20rpx 30rpx 15rpx 30rpx;
		margin-top: -260rpx;
		/* #ifdef APP-PLUS */
		margin-top: -180rpx;
		/* #endif */
		/* #ifdef H5 || MP-WEIXIN */
		margin-top: -300rpx;
		/* #endif */
		background: #ffffff;
		border-radius: 32rpx 32rpx 0 0;

		.search-box {
			display: flex;
			height: 75rpx;
			width: 100%;
			background: rgba(243, 243, 243, 0.1);
			border: 1px solid #cecece;
			border-radius: 38rpx;
			box-sizing: border-box;
			padding: 16rpx 20rpx;
			margin-top: 20rpx;
		}

		image {
			width: 40rpx;
			height: 40rpx;
			vertical-align: middle;
			margin-right: 10rpx;
		}

		.input {
			height: 75rpx;
			margin: 0;
			margin-top: -20rpx;
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #adadad;
			line-height: 53rpx;
			border-radius: 0 38rpx 38rpx 0;
			border: none;
		}

		.line {
			width: 4rpx;
			background: #207ff2;
		}
	}

	.conent-boxs {
		display: flex;
		position: relative;
		background: #ffffff;
		margin-top: -1rpx;

		.left {
			width: 246rpx;
			height: calc(100vh - 370rpx);
			background: #f5f6f8;

			.nav-item {
				height: 115rpx;
				line-height: 115rpx;
				padding-left: 30rpx;
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #1f1f1f;

				.line {
					display: none;
				}
			}

			.active {
				background: #ffffff;
				position: relative;
				border-radius: -12rpx;

				.line {
					width: 8rpx;
					height: 34rpx;
					display: inline-block;
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
				}

				&::after {
					content: '';
					width: 34rpx;
					height: 151rpx;
					position: absolute;
					right: -8rpx;
					z-index: 99;
					background-image: url('https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/occupation/nav-item-right-bg.png');
					background-size: 100% 100%;
					background-repeat: no-repeat;
					transform: translateY(-20rpx);
				}
			}
		}

		//
		.right {
			margin: 0 30rpx;

			.industry-level2-item {
				.name {
					font-size: 34rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #303030;
					line-height: 53rpx;
					margin-bottom: 20rpx;
				}

				.industry-level3-box {
					width: 450rpx;
					display: flex;
					flex-wrap: wrap;
					margin-bottom: 50rpx;
					position: relative;

					.industry-level3-item {
						width: 200rpx;
						height: 70rpx;
						background: #f5f6f8;
						border: 2rpx solid #f5f6f8;
						border-radius: 10rpx;
						text-align: center;
						line-height: 70rpx;
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #7b7b7b;
						margin-bottom: 20rpx;

						&:nth-child(2n + 1) {
							margin-right: 22rpx;
						}
					}

					.industry-level3-item.selected {
						background: #edf6ff;
						border: 2px solid #7cb7ff;
						color: #4696f8;
					}

					&:empty::after {
						content: '没有相关数据';
						position: absolute;
						left: 40%;
						font-size: 12rpx;
						top: 150rpx;
						color: #7b7b7b;
					}
				}
			}
		}
	}

	.footer {
		width: 100%;
		height: 110rpx;
		background: #ffffff;
		box-shadow: 0px -2rpx 20rpx 0px rgba(152, 152, 152, 0.12);
		position: fixed;
		bottom: 0;
		padding: 20rpx 30rpx calc(env(safe-area-inset-bottom) + 20rpx) 30rpx;
		box-sizing: border-box;
		display: flex;
		position: relative;

		.title {
			display: inline-block;
			height: 50rpx;
			line-height: 50rpx;
		}

		.selected-list-boxs {
			flex: 1;
			height: 52rpx;
			margin-left: 10rpx;
			line-height: 52rpx;
			display: flex;
			overflow-x: auto;

			.selected-item {
				padding: 0 16rpx;
				height: 50rpx;
				background: #edf6ff;
				border-radius: 25rpx;
				box-sizing: border-box;
				font-size: 26rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #4696f8;
				line-height: 50rpx;
				margin-right: 12rpx;

				image {
					width: 18rpx;
					height: 18rpx;
					margin-left: 12rpx;
				}
			}
		}

		.footer_button {
			position: absolute;
			right: 20rpx;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	// 搜索结果展示部分
	.search-result {
		width: 100%;
		height: 100%;
		// #ifdef APP-PLUS
		height: calc(100% - 80rpx);
		// #endif
		position: absolute;
		top: 0;
		left: 0;
		background: #ffffff;
		padding: 0 40rpx;
		z-index: 999;
		overflow: auto;

		.result-item {
			padding: 30rpx 0;
			border-bottom: 1rpx solid #e5e5e5;
			font-family: Source Han Sans CN;
			line-height: 46rpx;
			font-weight: 600;
			letter-spacing: 0.05em;

			.name {
				font-size: 32rpx;
				margin-bottom: 10rpx;
			}

			.desp {
				font-size: 28rpx;
				font-weight: 400;
				color: #7b7b7b;
			}
		}
	}
</style>
